<template>
  <div class="person">
    <!-- 
      09 watch监听器
     -->
     <h1>情况4: 监视reactive定义的对象类型数据, 且默认开启深度监视</h1>
     <h2>姓名: {{ person.name }}</h2>
     <h2>年龄: {{ person.age }}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="changePerson">修改人</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { reactive, watch } from 'vue'
let person = reactive({
  name: '张三',
  age: 19
})




const changeName = () => {
  person.name += '~'
}

const changeAge = () => {
  person.age +=1
}

const changePerson = () => {
  // 地址没变,只是地址里的值变了
  Object.assign(person, {name: '李四',
    age: 20
  })
}
// 情况3: 监视reactive定义的对象类型数据, 且默认开启深度监视
// newV和oldV都相同 , 因为监听的地址始终没有变化
watch(person, (newV, oldV)=> {
  console.log('person修改了',newV, oldV)
})

</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>